<template>
  <div ref="container" class="container"></div>
</template>

<script setup lang="ts">

import * as THREE from 'three';

import { onMounted, onUnmounted, getCurrentInstance } from 'vue'

import { PlantScene } from '../scene/PlantScene'


onMounted(() => {

  const container:HTMLElement = getCurrentInstance()?.refs['container'];

  let scene = new PlantScene();
  scene.init(container);
  
})


onUnmounted(() => {
  
});

function animate() {
    requestAnimationFrame(()=> {
        animate();
    });
    debugger
    render();
}

function render() {
        if (camera && scene && renderer) {
            renderer.render(scene, camera);
        }

    }

</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>